<template>
	<base-popup
		titleT="notice.tabs.announcement"
		:show="appStore.todoShow"
		titleIcon="betslip"
		@close="onClose">
		<div class="flex flex-col items-center">
			<base-image src="todo-notice.png" class="mt-6 w-[325px] mb-[40px]" />
			<div class="mx-auto pt-6 px-10 text-center text-lg leading-[20px] text-[20px] mb-2">
				{{ $t('app.toNoticeDesc') }}
			</div>
			<a href="mailto:support@2up.io" class="text-primary no-underline text-[20px]">
				support@2up.io
			</a>
			<!-- <base-image src="download/qr.png" class="mt-4 w-[150px]" />
			<base-image src="download/app-store" class="mt-3 w-[140px]" />
			<base-image src="download/google-play" class="mt-2 w-[140px]" /> -->
			<div class="w-[90%] md:w-[430px] pt-8 pb-6">
				<base-button type="primary" @click="onClose">
					{{ $t('action.close') }}
				</base-button>
			</div>
		</div>
	</base-popup>
</template>

<script lang="ts" setup>
import { BasePopup, BaseImage, BaseButton } from '@/components/base'
import { useAppStore } from '@/store'

defineOptions({ name: 'ViewsAppTodo' })

const appStore = useAppStore()

const onClose = () => appStore.showTodo(false)
</script>
